
<template>
  <div class="history">
    <el-dialog title="历史记录" 
      :show-close='true'
      :close-on-click-modal='false'
      :append-to-body='true' 
      width='820px' 
      top="12vh"
      :visible.sync='showDialog'>
      <div class="history-div">
        <!-- 此处是vue v-show 惊天大bug 莫名其妙，此代码毫无作用，去掉居然报错 -->
        <p v-show="is"></p>
        <p v-show="!is"></p>
        <el-timeline class="timeLine" style="overflow:auto;padding-top:16px;">
          <el-timeline-item color="#409eff" class="history_timeline" v-for="(item,index) in listBody" :key="index" :timestamp="item.updateTime" placement="top">
            <div class="content-box">
              {{item.updateUser}} <span style="color:#757373;padding: 0 5px 0 5px;">修改了</span> 
              <span class="content-field">{{updateItem[index]}} &nbsp;&nbsp;&nbsp;</span>
              <span @click="toggle(index)" style="cursor: pointer;color: #409eff;" v-show="!isShowHistroyDetails[index]">详情</span>
              <span @click="toggle(index)" style="cursor: pointer;color: #409eff;" v-show="isShowHistroyDetails[index]">收起</span>
              <i class="el-icon-arrow-down" style="cursor: pointer;" @click="toggle(index)" v-show="!isShowHistroyDetails[index]"></i>
              <i class="el-icon-arrow-up" color="#409eff" style="cursor: pointer;" @click="toggle(index)" v-show="isShowHistroyDetails[index]"></i>
            </div>
            <div  v-show="isShowHistroyDetails[index]">
              <el-table border :data="updateContent[index]" style="width: 840px">
                <el-table-column prop="updateItem" label="修改项" width="160px"></el-table-column>
                <el-table-column prop="updatePre" label="修改前" ></el-table-column>
                <el-table-column prop="updateAfter" label="修改后" ></el-table-column>
              </el-table>
            </div>
          </el-timeline-item>
        </el-timeline>
        <!-- 修复最后一列显示不全的问题 -->
        <div><p>&nbsp;</p></div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { querySysHistoryInfoListMap, querySysHistoryInfoListPage } from '@/api/system/sysHistoryInfoApi';
import { reqCommonMsg } from '@/util/reqCommonMsg';
export default {
  name: 'update-history',
  data() {
    return {
      option: {},
      showDialog: false,
      conditions: [],
      orderRules: [],
      //对应数据库的内容
      listBody: [],
      //修改项
      updateItem: [],
      //修改详情
      updateContent: [],
      //显示隐藏修改详情
      isShowHistroyDetails: [],
      //此处 解决bug
      is: true,
    }
  },
  watch: {

  },
  created() {
     
  },
  methods: {
    //获取历史修改记录的函数
    getUpdateHistoryRecord(dataId, className) {
      this.reqParams =  {
        singleBody: {
          updateDataId: dataId,
          className: className
        },
        listBody: [{}],
        sqlCondition: this.conditions,
        orderRule: [{prop:'create_datetime',order:'descending'}],
        currentPage: 1, 
        pageSize: 1000
      }
      this.commonData = reqCommonMsg(this.reqParams)
      querySysHistoryInfoListPage(this.commonData).then(res => {
        //this.$console.log('res:', res)
        //把修改历史记录 对应数据库内容给this.listBody
        this.listBody = res.data.body.listBody;

        for(var i = 0; i < this.listBody.length; i++){

          let updateBeforeDataObj = {};
          let updateAfterDataObj = {};

          updateBeforeDataObj = JSON.parse(this.listBody[i].updateBeforeDataObj)
          updateAfterDataObj = JSON.parse(this.listBody[i].updateAfterDataObj)

          let updateContent = [];
          for(var k in updateBeforeDataObj){
            let v = updateBeforeDataObj[k]
            //this.$console.log('k:', k)
            updateContent.push({
              updateItem: k,
              updatePre: v,
              updateAfter: updateAfterDataObj[k]
            })
          }

          this.listBody[i].updateContent = updateContent;
          this.listBody[i].updateTime = this.listBody[i].createDatetime;
          this.listBody[i].updateUser = this.listBody[i].createRealName;
        }
        //this.$console.log('this.listBody', this.listBody)
        //用于显示的标准数组
        var isShow = new Array(this.listBody.length);
        //用于显示的修改详情
        var updateContentTemp = new Array(this.listBody.length);
        var updateItemTemp = new Array(this.listBody.length);
        for (var i = 0; i < this.listBody.length; i++) {
          let updateContentJson = this.listBody[i].updateContent;
          updateContentTemp[i] = updateContentJson;
          updateItemTemp[i] = this.getUpdateItems(updateContentJson);
          isShow[i] = false;
        }
        this.isShowHistroyDetails = isShow;
        this.updateContent = updateContentTemp;

        this.updateItem = updateItemTemp;
        this.showDialog = true;
      }, error => {
        
      });
    },
    getUpdateItems(param) {
      let temp = param.map(item => {
        return item.updateItem;
      })
      let result = '';
      let length=0;
      for (let i=0 ; i<temp.length-1; i++) {
        length+=temp[i].length+1;
        if (length >50) {
          return result+temp[i] + ' ...'
        }
        result+=temp[i] + '、'
      }
      result+=temp[temp.length-1];
      return result;
    },
    toggle(index) {
      this.isShowHistroyDetails[index] = !this.isShowHistroyDetails[index];
      //此处 解决bug
      this.is = !this.is;
    },
  }
}
</script>
<style scoped>
.time {
  font-size: 15px;
  font-weight: bold;
}
.content-box {
  padding: 5px;
  font-size: 13px;
  display: flex;
}
.timeLine {
  padding-left: 2%;
}
.history-div {
    height: 70vh;
    overflow-y: scroll;
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;height: 0;
}

.content-field{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  /* width: 70%; */
}
</style>
<style>
.history_timeline .el-timeline-item__timestamp {
    color: #08090a !important;
    line-height: 1 !important;
    font-size: 15px !important;
}
</style>